<template>
	<view class="ledger-container">
		<top-title-add @closeBtn="closeBtn" titleText="账本管理" @add="addLedger"></top-title-add>
		<scroll-view scroll-y="true" style="height: 1200rpx;width: 100%;">
		    <view class=" scroll-view-container" >
				<view class="ledger-item-container" v-for="(item, index) in ledgerList" :key="index" :style="{backgroundColor: item.bgcColor}">
					<view class="ledger-item-title-container" :style="{color: item.fontColor}">{{item.name}}</view>
					<view class="ledger-item-more-container">
						<view class="ledger-item-more-icon-item-container">
							<view class="ledger-item-more-icon-item iconfont icon-sandian" @click="selectOperateLedger(item, index)"></view>
							<!-- 编辑 删除 按钮显示 -->
							<view class="ledger-item-edit-delete-show" v-if="item.showEditFlag">
								<edit-delete-other :selectList="selectList" @editOperate="editOperate(item, index)" @deleteOperate="deleteOperate(item, index)"></edit-delete-other>
							</view>
						</view>
					</view>
					<view class="ledger-item-share-container">
						<view class="ledger-item-share-icon-bgc-container">
							<view class="ledger-item-share-icon-bgc-item iconfont icon-jiaren"></view> 
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import topTitleAdd from '../top-title-add/top-title-add.vue';
	import editDeleteOther from '@/components/edit-delete-other/edit-delete-other.vue';
    export default {
		components: {
			topTitleAdd, editDeleteOther
		},
		props: {
			ledgerList: {
				type: Array,
				default: () => []
			}
		},
        data() {
            return {
				indicator: true,
                accountName: '牛逼',
				addName: '添加',
				selectList: [{
					id: 1,
					name: '编辑',
					showRed: false
				}, {
					id: 2,
					name: '删除',
					showRed: true
				}],
            }
        },
		methods: {
			/** 卡片上编辑回调
			 * @param {Object} item
			 * @param {Object} index
			 */
			editOperate(item, index) {
				// 回调给设置主页面，让他弹框
				this.$emit("showAccountDetail", item, index);
			},
			/**
			 * 卡片上删除回调
			 */
			deleteOperate(item, index) {
				this.$emit("deleteAccountDetail", item, index);
			},
			/** 点击选择操作
			 * @param {Object} item 对象
			 * @param {Object} index 索引
			 */
			selectOperateLedger(item, index) {
				this.ledgerList.forEach((item1, index1) =>  {
					if (index == index1) {
						item1.showEditFlag = !item1.showEditFlag;
					} else {
						item1.showEditFlag = false;
					}
				});
			},
			/**
			 * 新增回调
			 */
			addLedger() {
				this.$emit("addCategory");
			},
			/**
			 * 点击x 回调
			 */
			closeBtn() {
				this.$emit("closeBtn");
			}
		},
		mounted() {
			
		},
    }
</script>

<style lang="scss">
	
	.ledger-container {
		width: 100%;
		height: 1320rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		
		.scroll-view-container {
			width: 100%;
			min-height: 1200rpx;
			box-sizing: border-box;
			padding: 20rpx 0rpx;
			
			.ledger-item-container {
				width: 100%;
				height: 180rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
				box-shadow: 0px 0px 2px #dfdede; 
				border-radius: 20rpx;
				// 背景色是账本的颜色的中色 （卡片的颜色）
				// background-color: #fef4c6;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
				box-sizing: border-box;
				
				.ledger-item-title-container {
					width: 100%;
					height: 33%;
					font-weight: bold;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
				
				.ledger-item-more-container {
					width: 100%;
					height: 33%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					
					.ledger-item-more-icon-item-container {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						border-radius: 50%;
						justify-content: center;
						align-items: center;
						background-color: $themeIconBgcGreyWhiteColor;
						position: relative;
						
						.ledger-item-more-icon-item {
							font-size: 35rpx;
							color: $themeDeepGreyColor;
						}
						
						.ledger-item-edit-delete-show {
							width: 120rpx;
							min-height: 100rpx;
							position: absolute;
							left: -120rpx;
							top: 10rpx;
							border-radius: 10rpx;
						}
					}
				}
				
				.ledger-item-share-container {
					width: 100%;
					height: 33%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					
					.ledger-item-share-icon-bgc-container {
						width: 60rpx;
						height: 60rpx;
						display: flex;
						border-radius: 50%;
						justify-content: center;
						align-items: center;
						background-color: $themeLightPurpleColor;
						
						.ledger-item-share-icon-bgc-item {
							font-size: 35rpx;
							color: $themePurpleColor;
						}
					}

				}
			}
		}

	}
	
</style>
